<template>
  <div class="db_dialog">
    <el-form
      ref="form"
      class="ydbform"
      :rules="rules"
      :model="form"
      label-position="left"
      label-width="110px"
    >
      <!-- <el-form-item label="数据表分类：" prop="dataStructureType">
        <el-select
          class="bin_select"
          v-model="form.dataStructureType"
          placeholder="请选择数据表分类"
        >
          <el-option label="结构化" value="1"></el-option>
          <el-option label="非结构化" value="2"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="数据表标识：" prop="metadataDictyTableCode">
        <el-input
          class="bin_input"
          v-model="form.metadataDictyTableCode"
          placeholder="英文及数字 如: table_name1"
        >
        </el-input>
      </el-form-item> -->
      <!-- <el-form-item label="数据表标题：" prop="metadataDictyTableName">
        <el-input
          class="bin_input"
          v-model="form.metadataDictyTableName"
          placeholder="描述或备注性文字"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="字典名称：" prop="dictName">
        <el-autocomplete
          class="bin_input"
          v-model="form.dictName"
          :fetch-suggestions="querySearch"
          placeholder="请输入字典名称"
          @select="handleSelect"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="词语：" prop="word">
        <el-input
          class="bin_input"
          v-model="form.word"
          placeholder="请输入词语"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="含义：" prop="meaning">
        <el-input
          class="bin_input"
          v-model="form.meaning"
          placeholder="请输入含义"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div class="edit_btns">
      <el-button class="bin_button" size="small" @click="cancelBtn">
        取消
      </el-button>
      <el-button class="bin_button" size="small" @click="goLinkFn">
        确认
      </el-button>
    </div>
  </div>
</template>

<script>
import { Array } from "core-js";
import { areaRadial } from "d3";

export default {
  name: "menuItem",
  props: {
    currEdit: {
      type: Object,
      default: () => {
        return {
          checkedl: [],
        };
      },
    },
    moxingmenu: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      rules: {
        dictName: [
          { required: true, message: "请输入字典名称", trigger: "change" },
        ],
        word: [{ required: true, message: "请输入词语", trigger: "blur" }],
        meaning: [{ required: true, message: "请输入含义", trigger: "blur" }],
      },
      form: {
        // dataStructureType: "",
        // metadataDictyColVos: [],
        // metadataDictyTableCode: "",
        // metadataDictyTableName: "",
        dictName: "",
        word: "",
        meaning: "",
      },
    };
  },
  mounted() {
    this.restaurants = this.loadAll();
    console.log(this.moxingmenu);
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      let arr = this.moxingmenu.map((res) => {
        return {
          value: res.modelName,
        };
      });
      return arr;
    },
    handleSelect(item) {
      this.form.dictName = item.value;
      console.log(item);
    },
    cancelBtn() {
      this.$emit("cancel");
    },
    goLinkFn() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form));
          this.$emit("confirm", form);
          setTimeout(() => {
            this.form = {
              dictName: "",
              // metadataDictyColVos: [],
              word: "",
              meaning: "",
            };
            this.$refs["form"].resetFields();
          }, 1000);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.db_dialog {
  .el-dialog__body {
    padding: 0;
  }
  .ydbform {
    width: 400px;
    margin: 0 auto;
  }
  .edit_btns {
    margin-top: 50px;
    display: flex;
    align-self: center;
    justify-content: center;
  }
  ::v-deep .el-form--label-left .el-form-item__label {
    color: #fff;
  }
}
</style>
